<template>
  <div class="basic-info">
    <TitleHeader name="基本信息" />
    <div class="first-block">
      <div
        class="first-item"
        v-for="(item, index) in basicInfoList"
        :key="index"
      >
        <div class="top">{{ item.value }}</div>
        <div class="bottom">
          <img class="icon" :src="item.icon" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <TitleHeader name="专业介绍" />
    <div class="major-intro">
      <van-text-ellipsis
        rows="3"
        :content="majorIntro"
        expand-text="展开"
        collapse-text="收起"
      />
    </div>
    <TitleHeader name="开设课程" />
    <div class="offer-courses">
      <van-text-ellipsis
        rows="3"
        :content="offerCourses"
        expand-text="展开"
        collapse-text="收起"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import TitleHeader from './TitleHeader.vue';
import zydm from '@/assets/images/zydm.png';
import xynx from '@/assets/images/xynx.png';
import syxw from '@/assets/images/syxw.png';
import pjxc from '@/assets/images/pjxc.png';
import { getMajorInfo } from '@/api/majorSearch'; // 导入 getMajorInfo 函数
const props = defineProps({
  positionTagId: {
    type: String,
    default: '',
  },
});
const basicInfoList = ref([
  {
    title: '专业代码',
    icon: zydm,
    value: '',
  },
  {
    title: '修业年限',
    icon: xynx,
    value: '',
  },
  {
    title: '授予学位',
    icon: syxw,
    value: '',
  },
  {
    title: '平均薪酬',
    icon: pjxc,
    value: '',
  },
]);
const majorIntro = ref('');
const offerCourses = ref('');

const getMajorInfoFn = async () => {
  const params = {
    positionTagId: props.positionTagId,
  };
  const res = await getMajorInfo(params);
  if (res.code == 200) {
    if (res.data.cateType == '10') {
      basicInfoList.value = [
        {
          title: '专业代码',
          icon: zydm,
          value: '',
        },
        {
          title: '修业年限',
          icon: xynx,
          value: '',
        },
        {
          title: '平均薪酬',
          icon: pjxc,
          value: '',
        },
      ];
      basicInfoList.value[0].value = res.data.tagCode;
      basicInfoList.value[1].value = res.data.tagTimeDesc;
      basicInfoList.value[2].value = '￥' + res.data.averageSalary;
    } else {
      basicInfoList.value = [
        {
          title: '专业代码',
          icon: zydm,
          value: '',
        },
        {
          title: '修业年限',
          icon: xynx,
          value: '',
        },
        {
          title: '授予学位',
          icon: syxw,
          value: '',
        },
        {
          title: '平均薪酬',
          icon: pjxc,
          value: '',
        },
      ];
      basicInfoList.value[0].value = res.data.tagCode;
      basicInfoList.value[1].value = res.data.tagTimeDesc;
      basicInfoList.value[2].value = res.data.tagDesc;
      basicInfoList.value[3].value = '￥' + res.data.averageSalary;
    }
    majorIntro.value = res.data.tagIntroduction;
    offerCourses.value = res.data.classes;
  }
};

watch(
  () => props.positionTagId,
  (newVal, oldVal) => {
    if (newVal && newVal !== oldVal) {
      getMajorInfoFn();
    }
  },
  { immediate: true }
);
onMounted(() => {});
</script>

<style lang="scss" scoped>
.basic-info {
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  overflow-y: scroll;
  .first-block {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 44px;
    .first-item {
      width: 352px;
      height: 130px;
      background: #f9f9f9;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 24px 30px 30px 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: bold;
        font-size: 26px;
        color: #333333;
        padding-left: 6px;
      }
      .bottom {
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24px;
        color: #666666;
        .icon {
          width: 34px;
          height: 30px;
          margin-right: 4px;
        }
      }
    }
  }
  .major-intro,
  .offer-courses {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26px;
    color: #333333;
    line-height: 47px;
    margin-bottom: 45px;
  }
}
</style>
